<template>
  <!-- 头部切换 -->
  <div>
    <div class="curTop flex">
      <div class="flex1">
        <div
          class="btn-cur"
          :class="{styleName:index == curts}"
          v-for="(item,index) in curItem"
          :key="index"
          @click="curTop(index)"
        >{{item.title}}</div>
      </div>
      <div class="fr">
        <div
          class="btn-cur"
          :class="{styleName:index == curtss}"
          v-for="(item,index) in factoryItem"
          :key="index"
          @click="curFactory(index)"
        >{{item.title}}</div>
      </div>
    </div>
    <!-- 头部数量 -->
    <div class="orderDataBox flex">
      <div
        v-for="(item, index) in orderNum"
        :key="'orderData' + index"
        class="orderDataBoxItem flex-center"
        :style="{color: item.color, backgroundColor: item.bgColor}"
      >
        <img :src="item.imgUrl" />
        <div style="flex-direction: column; text-align:center">
          <div class="font14">{{ item.title }}</div>
          <!-- <div class="font24 fontBold">{{ item.value}}</div> -->
          <div class="font24 fontBold" v-if="index==0">{{ item.value }}</div>
          <div class="font24 fontBold" v-else-if="index==1">{{ item.value }}</div>
          <div class="font24 fontBold" v-else-if="index==2">{{ item.value }}</div>
          <div class="font24 fontBold" v-else-if="index==3">{{ item.value}}</div>
          <div class="font24 fontBold" v-else-if="index==4">{{ item.value}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getStatistcs } from '@/api/home/home'
export default {
  name: 'runborder',
  data() {
    return {
      orderNum: [],
      curItem: [
        { id: 0, title: '今日' },
        { id: -1, title: '昨日' },
        { id: -7, title: '本周' },
        { id: -30, title: '本月' },
        // { id: '', title: '全部' },
      ],
      factoryItem: [
        { id: 0, title: '全部' },
        { id: 1, title: '盐田工厂' },
        { id: 2, title: '龙华工厂' },
      ],
      curts: 0,
      curtss: 0,
      factory: '0',
      time: '1',
      loadState: true,
    }
  },
  created() {
    this.getStatistcs()
  },

  methods: {
    //订单量
    getStatistcs() {
      let self = this
      self.loadState = true
      getStatistcs({
        factory: self.factory,
        time: self.time,
      }).then((res) => {
        if (res.code == 200) {
          self.orderNum = res.data.orderData
          self.loadState = false
        } else {
          self.$message.warning(res.msg)
        }
      })
    },
    //时间筛选
    curTop(index) {
      this.curts = index
      console.log(this.curts)
      switch (this.curts) {
        case 0:
          this.factory = this.factory
          this.time = 1
          break
        case 1:
          this.factory = this.factory
          this.time = -1
          break
        case 2:
          this.factory = this.factory
          this.time = -7
          break
        case 3:
          this.factory = this.factory
          this.time = -30
          break
      }
      this.getStatistcs()
    },
    //工厂切换
    curFactory(index) {
      this.curtss = index
      console.log(this.curtss)
      switch (this.curtss) {
        case 0:
          this.factory = 0
          this.time = this.time
          break
        case 1:
          this.factory = 1
          this.time = this.time
          break
        case 2:
          this.factory = 2
          this.time = this.time
          break
      }
      this.getStatistcs()
    },
  },
}
</script>

<style lang="sass" scopted>
.curTop
  width: 100%
  margin-bottom: 10px
  & > div
    display: flex
  .btn-cur
    height: 30px
    line-height: 30px
    width: 70px
    text-align: center
    border-radius: 3px
    margin: 0 10px 10px 0
    color: #1890ff
    border: 1px solid #1890ff
    cursor: pointer

/* 订单数据 */
.orderDataBox
  height: 120px
  justify-content: space-between
  margin-bottom: 20px
  &Item
    width: 22.5%
    border-radius: 4px
</style>